<template>
  <div class="component-root-container">
    <el-header>
      <el-form ref="projectRule" :rules="projectRule" :model="project" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单号:" prop="requestId">
              <el-input v-model="project['requestId']" placeholder="请输入订单号" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单类型:" prop="requestType">
                <el-select v-model="project['requestType']" placeholder="请选择订单类型" filterable clearable>
                <el-option v-for="item in requestTypes" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="站址编码:" prop="siteId">
              <el-input v-model="project['siteId']" placeholder="请输入站址编码" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
            <el-col :span="8">
            <el-form-item label="产品标识:" prop="flag">
                <el-select v-model="project['flag']" placeholder="请选择产品标识" @change="selectChangedForFlag" filterable clearable>
                    <el-option v-for="item in flags" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资源ID:" prop="resourceId">
              <el-input v-model="project['resourceId']" placeholder="请输入资源ID" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资源类型:" prop="resourceType">
                  <el-select ref="resourceTypeRef" v-model="project['resourceType']" placeholder="请选择资源类型" filterable clearable >
                <el-option v-for="item in resourceTypes" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
         
        <el-row v-if="project['requestType']===2">
          <el-col :span="8">
            <el-form-item label="资源系统覆盖场景:" prop="coverScene">
              <el-input style="width:160px;" v-model="project['coverScene']" placeholder="请输入资源系统覆盖场景" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资源系统覆盖面积:" prop="coverRegionId">
                <el-input v-model="project['coverRegionId']" placeholder="请输入资源系统覆盖面积" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          
        </el-row>
        <el-row v-if="project['requestType']===3">
            <el-col :span="8">
            <el-form-item label="光缆产权性质:" prop="propCharId">
                 <el-input v-model="project['propCharId']" placeholder="请输入光缆产权性质" @input="change($event)" clearable>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="光缆长度:" prop="length">
              <el-input v-model="project['length']" placeholder="请输入光缆长度" @input="change($event)" clearable>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="8" :offset="16" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>

    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ queryCount }}</span></div>
            <div><span>拦截比率：</span><span>{{ queryCount }}</span></div>

            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">CRM非塔类(室分、微站、传输)订单起租时，批、绑定资源进行合规性校验，判断产品与对应站址的资源是否匹配，从而游免出现产品类型错误引发费用争议。</div>
          </div>
          <div class="page-tip" @click="clickExample">
            <div class="params-tip"><span>示例参数:  </span>示例参数：订单号：1116013102940761，订单类型：塔类/微站，站址编码：370202908000000528，产品标识：机房，
资源ID：000102050000000002463447，资源类型：一体化机柜</div>
          </div>
        </el-row>
      </div>
    </el-main>
    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <!-- <div> {{ dialog.title }} </div> -->
              <el-row v-for="(item,index) in dialog.content" :key="index" class="dialog-row">
                <el-col>
                  {{ item.message }}
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
        <!-- <el-row>
          <div class="page-tip">
            <div class="description">
             <el-table
                size="mini"
                :data="dialogTable"
                stripe
                style="width: 100%">
                <el-table-column
                prop="requestId"
                label="订单号"
                width="180">
                </el-table-column>
                <el-table-column
                :formatter="requestTypeFormatter"
                prop="requestType"
                label="订单类型"
                width="180">
                </el-table-column>
                <el-table-column
                prop="siteId"
                label="站址编码">
                </el-table-column>

                <el-table-column
                prop="resourceId"
                label="资源编码">
                </el-table-column>

                <el-table-column
                prop="resourceType"
                label="资源类型">
                </el-table-column>

                <el-table-column 
                prop="flag"
                label="产品标识">
                </el-table-column>

                <el-table-column 
                prop="message"
                label="结果">
                </el-table-column>
            </el-table>

            </div>
          </div>
        </el-row> -->
      </div>
    </el-main>

  </div>


</template>

<script>
  import mixin from './mixins'
  export default {
    mixins: [mixin],
    data() {
      return {
        dialogVisible: false,
        queryCount:0,
        project: {
            requestId: '',
            requestType: '',
            siteId: '',
            flag: '',
            resourceId: '',
            resourceType: '',
            coverScene: '',
            coverRegionId: '',
            propCharId: '',
            length:''
        },
        requestTypes:[
            {
                key: 1,
                value: '塔类/微站'
            },
            {
                 key: 2,
                value: '室分类'
            },
            {
                 key: 3,
                value: '传输类'
            }
        ],
        flags:[
            {
                key:'塔',
                value:'塔'
            },
            {
                key:'机房',
                value:'机房'
            },
            {
                key:'室分',
                value:'室分'
            },
            {
                key:'光缆',
                value:'光缆'
            }
        ],
        resourceTypes:[],
        dialog: {
          title: '',
          content: [],
          contentkey:[]
        },
        dialogTable:[],
        options: [{
            value: 'tssai',
            key: '1'
          }
        ],
        projectRule: {
          requestId: [{
            required: true,
            message: '请输入订单号',
            trigger: 'blur'
          }],
          requestType: [{
            required: true,
            message: '请选择订单类型',
            trigger: 'blur'
          }],
          siteId: [{
            required: true,
            message: '请输入站址编码',
            trigger: 'blur'
          }],
          flag: [{
            required: true,
            message: '请选择产品标识',
            trigger: 'blur'
          }],
          resourceId: [{
            required: true,
            message: '请输入资源ID',
            trigger: 'blur'
          }],
          resourceType: [{
            required: true,
            message: '请选择资源类型',
            trigger: 'blur'
          }],
          coverScene: [{
            required: true,
            message: '请输入资源系统覆盖场景',
            trigger: 'blur'
          }],
          coverRegionId: [{
            required: true,
            message: '请输入资源系统覆盖面积',
            trigger: 'blur'
          }],
          propCharId: [{
            required: true,
            message: '请输入光缆产权性质',
            trigger: 'blur'
          }],
          length: [{
            required: true,
            message: '请输入光缆长度',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('3.10');
    },
    mounted() {},
    computed: {},
    methods: {
      async buttonClick() {
        try {
          this.dialog = {
            title: '',
            content: []
          }

          await this.$refs['projectRule'].validate()
          const data = [{
            requestId: this.project['requestId'],
              requestType: this.project['requestType'],
              siteId: this.project['siteId'],
              flag: this.project['flag'],
              resourceId: this.project['resourceId'],
              resourceType: this.project['resourceType'],
              coverScene: this.project['coverScene'],
              coverRegionId: this.project['coverRegionId'],
              propCharId: this.project['propCharId'],
              length: this.project['length']
          }]
          const r = await this.$http({
            url: this.$http.adornBizUrl('/bindOrder/findByBindOrder'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          console.log(r.data);
          if (r.data.resultStat ==="000") {
            // console.log(r.data.data.retiurnMsg)
          // this.dialogTable = r.data.data
this.dialog.content = r.data.data;
            // this.dialog.title = r.data.data.retiurnMsg
          }else{
              this.dialog.title = r.data.mess
          }
          this.dialogVisible = true
        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
        }
      },
      getTitle(key) {
        const option = this.options.filter(o => o.key === key)
        let value = null
        if (option[0]) {
          value = option[0].value
        }
        return value
      },
      requestTypeFormatter(row, column){
        let type = row.requestType;
                if(requestType === 1){
                return '塔类/微站'
                } else  if(requestType === 2){
                return '室分类'
                }else{
                    return '传输类'
                }
      },
      reset() {
        this.project = {
           requestId: '',
            requestType: '',
            siteId: '',
            flag: '',
            resourceId: '',
            resourceType: '',
            coverScene: '',
            coverRegionId: '',
            propCharId: '',
            length:''
        }

        this.dialog = {
          title: '',
          content: []
        }
        this.$refs['projectRule'].clearValidate();
      },
      change(e) {
        this.$forceUpdate()
      },

        selectChangedForFlag(value){
            console.log("value",value);
            if(value === '塔'){
                this.project.resourceType=''
                this.resourceTypes = [
                    {
                        key:'普通地面塔',
                        value:'普通地面塔'
                    },
                    {
                        key:'景观塔',
                        value:'景观塔'
                    },
                    {
                        key:'简易塔',
                        value:'简易塔'
                    },
                    {
                        key:'普通楼面塔',
                        value:'普通楼面塔'
                    },
                    {
                        key:'楼面抱杆',
                        value:'楼面抱杆'
                    },
                    {
                        key:'共享社会塔',
                        value:'共享社会塔'
                    },
                    {
                        key:'五铁塔',
                        value:'五铁塔'
                    }
                ]
                

            }
            if(value === '机房'){
                this.resourceTypes = [
                    {
                        key:'自建砖混机房',
                        value:'自建砖混机房'
                    },
                    {
                        key:'自建框架机房',
                        value:'自建框架机房'
                    },
                    {
                        key:'自建彩钢板机房',
                        value:'自建彩钢板机房'
                    },
                    {
                        key:'一体化机柜',
                        value:'一体化机柜'
                    },
                    {
                        key:'租赁机房',
                        value:'租赁机房'
                    },
                    {
                        key:'其他机房',
                        value:'其他机房'
                    },
                    {
                        key:'RRU拉远',
                        value:'RRU拉远'
                    },
                    {
                        key:'一体化机房',
                        value:'一体化机房'
                    },
                    {
                        key:'无机房',
                        value:'无机房'
                    }
                ]
                this.project.resourceType=''

            }
            if(value === '室分'){
                this.resourceTypes = [
                    {
                        key:'楼宇室分',
                        value:'楼宇室分'
                    },
                    {
                        key:'隧道室分',
                        value:'隧道室分'
                    }
                ]
                this.project.resourceType=''
            }
            if(value === '光缆'){
                this.resourceTypes = [
                    {key:'校园',value:'校园'},
                    {key:'地铁',value:'地铁'},
                    {key:'机场',value:'机场'},
                    {key:'车站',value:'车站'},
                    {key:'码头',value:'码头'},
                    {key:'大型场馆',value:'商务楼宇'},
                    {key:'医院',value:'医院'},
                    {key:'大型商场',value:'大型商场'},
                    {key:'餐饮娱乐场所',value:'餐饮娱乐场所'},
                    {key:'宾馆酒店',value:'宾馆酒店'},
                    {key:'隧道',value:'隧道'},
                    {key:'其他',value:'其他'},
                    {key:'党政机关',value:'党政机关'},
                    {key:'高铁',value:'高铁'}
                ]
                this.project.resourceType=''
            }
        },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.queryCount=result.cnt||'0';
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(120px, 60%, right);
  .el-input {
    width: 60%;
  }

  .el-select {
    width: 60%;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: rgba(235, 75, 75, 1);
  }

  .custom-button {
    display: flex;
    justify-content: center;
  }

  .dialog-row {
    margin-bottom: 5px;
  }
</style>
